CSS : Exercice sur les flexbox de base

1. Créez un nouveau fichier HTML nommé navigation.html.

2. À l'intérieur du fichier HTML, créez une structure de base pour une page web, y compris un en-tête (<header>), une barre de navigation (<nav>), et une section de contenu (<section>).

3. Dans la barre de navigation, créez une liste non ordonnée (<ul>) contenant plusieurs éléments de menu (<li>). Par exemple :

   <nav>
       <ul>
           <li><a href="#">Accueil</a></li>
           <li><a href="#">À Propos</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
   </nav>
   Copy

4. Appliquez les styles CSS appropriés pour transformer la barre de navigation en un conteneur Flexbox horizontal. Utilisez les propriétés Flexbox que vous avez apprises dans le cours.

5. Assurez-vous que les éléments de menu sont correctement espacés et centrés horizontalement dans la barre de navigation.

6. Ajoutez des styles CSS supplémentaires pour améliorer l'apparence de la barre de navigation, tels que des couleurs, des bordures, etc.

• Pour ceux qui souhaitent un défi supplémentaire, ajoutez des règles CSS pour rendre la barre de navigation réactive (responsive) lorsqu'elle est affichée sur un écran de petite taille (par exemple, un smartphone).

• Vous pouvez utiliser des média requêtes (media queries) et/ou d'autres techniques CSS pour ajuster la disposition de la barre de navigation et des éléments de menu afin qu'ils s'adaptent à un écran plus étroit.

• Utilisez les propriétés display: flex;, justify-content, et align-items pour créer une barre de navigation flexible.

• Le bonus de responsivité peut être atteint en utilisant des média requêtes (media queries) pour cibler les écrans de petite taille et en ajustant les styles CSS en conséquence.

Une fois terminé, l'exercice devrait permettre aux étudiants de créer une barre de navigation horizontale flexible en utilisant Flexbox. Pour ceux qui souhaitent un défi supplémentaire, ils peuvent rendre la barre de navigation réactive pour les écrans de petite taille en ajoutant le bonus de responsivité.